<script lang="ts">
import payTabIcon from '~/assets/icons/pay-tab-icon.png';
import depositTabIcon from '../icon/deposit-tab-icon.png';
import pcDepositTabIcon from '../icon/pc-deposit-tab-icon.svg';
import pcWithdrawTabIcon from '../icon/pc-withdraw-tab-icon.svg';

export interface TabType {
  label: string;
  key: 'deposit' | 'withdraw' | 'pay';
  icon?: string;
  className?: string;
  activeClassName?: string;
  disabled?: boolean;
  isHidden?: boolean;
};

export interface TabsProps {
  isMobile?: boolean;
  list?: TabType[];
  onSelect?: (tab: TabType, isMobile?: boolean) => void;
};

export function getPcTabs(): TabType[] {
  return [
    { key: 'deposit', label: $t('p9zKloGqNTkIgC4asiQrx'), icon: pcDepositTabIcon },
    { key: 'withdraw', label: $t('xQp2HJedTncmCsXifzn3'), icon: pcWithdrawTabIcon },
  ];
}

export function getMobileTabs(): TabType[] {
  return [
    {
      key: 'deposit',
      label: $t('p9zKloGqNTkIgC4asiQrx'),
      icon: depositTabIcon,
      className: 'border-(1px sys-layer-e solid) from-[#332326] to-[#131416] bg-gradient-to-r',
    },
    {
      key: 'pay',
      label: $t('0WLXkflOly2PXuEPmxkl'),
      icon: payTabIcon,
      className: 'border-(1px sys-layer-e solid) from-[#2E312E] to-[#131416] bg-gradient-to-r',
      disabled: true,
      isHidden: true,
    },
    {
      key: 'withdraw',
      label: $t('xQp2HJedTncmCsXifzn3'),
      className: 'border-(1px sys-layer-e solid) from-[#2D3442] to-[#131416] bg-gradient-to-r',
    },
  ];
}
</script>

<script setup lang="ts">
const props = defineProps<TabsProps>();

const activeRef = defineModel<TabType>('active');

const getTabsRef = computed((): TabType[] => {
  const list = props.list || (props.isMobile ? getMobileTabs() : getPcTabs());
  return list.filter(x => !toValue(x.isHidden));
});

function selectTab(tab: TabType) {
  if (tab.disabled) {
    return;
  }
  activeRef.value = tab;
  props.onSelect?.(tab, props.isMobile);
}

function getTabCls(tab: TabType) {
  return [
    'w-full text-base cursor-pointer',
    {
      'pc-tab-bg': !props.isMobile && activeRef.value?.key === tab.key,
      'grid grid-cols-1 w-full  items-center gap-2 rounded-7.5 px-3 py-3 text-base': !props.isMobile,
      '!grid-cols-[auto_1fr]': !props.isMobile && tab.icon,
      'rounded-lg flex-center h-13.5': props.isMobile && !tab.icon,
      'rounded-lg p-3 py-5 flex flex-col gap-y-1 items-center': props.isMobile && tab.icon,
      '!cursor-not-allowed !opacity-50 !blur-[0.5px] !grayscale-[80%] !pointer-events-none': tab.disabled,
    },
    tab.className,
    tab.activeClassName,
  ];
}
</script>

<template>
  <div class="grid grid-cols-1 gap-3">
    <div v-for="tab of getTabsRef" :key="tab.key" :class="getTabCls(tab)" @click="selectTab(tab)">
      <img v-if="tab.icon && !isMobile" class="h-4.5 w-4.5" :src="tab.icon">
      <div>{{ tab.label }}</div>
      <img v-if="tab.icon && isMobile" :src="tab.icon" class="max-w-50 object-cover">
    </div>
  </div>
</template>

<style lang="scss" scoped>
.pc-tab-bg {
  background: linear-gradient(90deg, #c60012 0%, #1d1e24 100%) !important;
}
</style>
